<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../../static/css/main.css" th:href="@{/static/css/main.css}">
    <title>用户中心</title>
</head>
<body>
<nav class="nav nav-pills nav-justified">
    <a class="nav-link active" th:href="@{/book/randBook}">首页</a>
    <a class="nav-link" th:href="@{/book/bookBrother}">分类与购买</a>
    <a class="nav-link " th:href="@{/admin/userCenter}">个人中心</a>
    <a class="nav-link" th:href="@{/shop/selectAllShop}">购物车</a>
    <a class="nav-link" th:href="@{/order/selectOrderLastAll}">查询订单</a>
</nav>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>

    <div class="carousel-inner">
        <div class="carousel-item active">
            <div class="jumbotron">
                <h1 class="display-4" style="margin-left: 500px"><a href="#">这是好书推荐轮播图</a></h1>
            </div>
        </div>
        <div th:each="bookRand:${bookRands}" class="carousel-item ">
            <div class="jumbotron">
                <h1 class="display-4" style="margin-left: 500px"><a  th:href="@{/book/bookDetail/{id}(id=${bookRand.id})}">《[[${bookRand.bookName}]]》</a></h1>
            </div>
        </div>
    </div>

    <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </button>
</div>

<div class="row">

    <div class="col-4">
        <h1>最新图书排行榜</h1>
        <div th:each="bookTime:${bookTimes}" class="list-group">
            <a th:href="@{/book/bookDetail/{id}(id=${bookTime.id})}" class="list-group-item list-group-item-action" aria-current="true">
                [[${bookTime.bookName}]] <span> [[${bookTime.createTime}]] </span>
            </a>
        </div>
    </div>

    <div class="col-4">
        <h1>评分最高排行榜</h1>
        <div th:each="bookMark:${bookMarks}" class="list-group">
            <a th:href="@{/book/bookDetail/{id}(id=${bookMark.id})}" class="list-group-item list-group-item-action" aria-current="true">
                [[${bookMark.bookName}]] <span class="badge badge-primary badge-pill"> [[${bookMark.mark}]] </span>
            </a>
        </div>
    </div>


    <div class="col-4">
        <h1>图书销量排行榜</h1>
        <div th:each="bookSell:${bookSells}" class="list-group">
            <a th:href="@{/book/bookDetail/{id}(id=${bookSell.id})}" class="list-group-item list-group-item-action" aria-current="true">
                [[${bookSell.bookName}]] <span class="badge badge-primary badge-pill"> [[${bookSell.sellCount}]] </span>
            </a>
        </div>
    </div>
</div>

<!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->
<!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>